<template >
    <div class="loginbBody" >
        <div class="loginDiv">
            <div class="login-content">
                <h1 class="login-title">用户登录</h1>
                <el-form :model="loginForm" label-width="100px"
                         :rules="rules" ref="loginForm">
                    <el-form-item label="用户名" prop="account">
                        <el-input style="width: 200px" type="text" v-model="loginForm.account"
                                  autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input style="width: 200px" type="password" v-model="loginForm.password"
                                  show-password autocomplete="off" size="small"  @keyup.enter.native="confirm"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="confirm" :disabled="confirm_disabled">确 定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        //登录地址http://localhost:8081/login
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Login",
        data() {
            return {
                confirm_disabled: false,
                loginForm: {
                    account: '',
                    password: ''
                },
                rules: {
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                    ],
                    passWord: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                }
            }
        },
        methods: {
            confirm() {
                this.confirm_disabled = true;
                this.$refs.loginForm.validate((valid) => {
                        if (valid) { //valid成功为true，失败为false
                            //后台验证
                            this.$axios.post(this.$httpUrl + '/userInfo/login', this.loginForm).then(
                                res => res.data).then(res => {
                                if ('00' === res.head.respStatus) {
                                    //存储
                                    window.sessionStorage.setItem("CurUser",JSON.stringify(res.data.user));
                                    console.log(res.data.menusList)
                                    //跳转路由
                                    this.$router.replace('/Index');
                                } else {
                                    this.confirm_disabled = false;
                                    this.$message('登录失败');
                                    return false;
                                }
                            });
                        }else {
                            this.confirm_disabled = false;
                            this.$message('登录失败');
                        }
                    }
                )

            }
        }
    }
</script>

<style scoped>
    .loginbBody {
        width: 100%;
        height: 100%;
        background:url('../assets/loginBackground.jpg');
        position: absolute;
        opacity: 90%;
    }

    .loginDiv {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -250px;
        width: 450px;
        height: 330px;
        background: #fff;
        border-radius: 5%;
    }

    .login-title {
        margin: 20px 0;
        text-align: center;
    }

    .login-content {
        width: 400px;
        height: 250px;
        position: absolute;
        top: 25px;
        left: 25px;
    }
</style>
